<template>
  <CloudAutoComplete style="width: 200px" placeholder="input here" @search="handleSearch">
    <template slot="dataSource">
      <CloudSelectOption v-for="email in result" :key="email">
        {{ email }}
      </CloudSelectOption>
    </template>
  </CloudAutoComplete>
</template>
<script>
export default {
  title: '3.自定义选项',
  data() {
    return {
      result: [],
    };
  },
  methods: {
    handleSearch(value) {
      let result;
      if (!value || value.indexOf('@') >= 0) {
        result = [];
      } else {
        result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
      }
      this.result = result;
    },
  },
};
</script>